<template>
  <view
    id="map"
    class="my-map"
  >
    <view class="ctrl-button">
      <view
        class="map-ctrl-button zoomin"
        @click="zoomin()"
      ></view>
      <view
        class="map-ctrl-button zoomout"
        @click="zoomout()"
      ></view>
      <view
        class="map-ctrl-button location"
        @click="locationMap()"
      ></view>
    </view>
    <slot></slot>
  </view>
</template>

<script>
import { GEOJSON_EMPTY } from '@/assets/data-map';

export default {
  props: {
    center: {
      type: Array,
      default() {
        return [114.00428, 22.585929];
      },
    },
    zoom: {
      type: Number,
      default() {
        return 9;
      },
    },
    minZoom: {
      type: Number,
      default() {
        return 6;
      },
    },
    maxZoom: {
      type: Number,
      default() {
        return 22;
      },
    },
  },
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const that = this;
      that.map = new SFMap.Map({
        container: 'map',
        center: that.center,
        zoom: that.zoom,
        minZoom: that.minZoom,
        maxZoom: that.maxZoom,
      });
      window.map = that.map;
      that.map.on('load', () => {
        that.isMapLoaded = true;
        that.map.dragRotate.disable();
        that.map.touchPitch.disable();
        // 定位图层
        that.map.addSource('map-location-source', {
          type: 'geojson',
          data: GEOJSON_EMPTY,
        });
        that.map.addLayer({
          id: 'map-location-layer',
          source: 'map-location-source',
          type: 'circle',
          paint: {
            'circle-radius': 8,
            'circle-color': '#00f',
            'circle-stroke-color': '#ffffff',
            'circle-stroke-opacity': 0.6,
            'circle-stroke-width': 2,
          },
        });
        that.$emit('map-loaded', that.map);
      });
    },
    zoomin() {
      this.map.zoomIn({ duration: 1000 });
    },
    zoomout() {
      this.map.zoomOut({ duration: 1000 });
    },
    locationMap() {
      const that = this;
      try {
        navigator.geolocation.getCurrentPosition((position) => {
          const center = [position.coords.longitude, position.coords.latitude];
          that.map.getSource('map-location-source').setData(turf.point(center));
          const zoom = that.map.getZoom();
          that.map.flyTo({ center, zoom: zoom > 15 ? zoom : 15 });
        });
      } catch (e) {
        that.$toast('位置权限获取失败！', {
          duration: 1000,
          icon: 'error',
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$icon-size: 1.3rem;
.my-map {
	width: 100%;
	height: 100%;
    .ctrl-button {
        position: absolute;
        bottom: 6.5rem;
        right: 1rem;
        z-index: 99;
    }
    .map-ctrl-button {
        width: $icon-size;
        height: $icon-size;
        background-color: rgba(255,255,255,0.90);
        position: relative;
        padding: 0.4rem;
        border: 0.5px solid rgba(238,238,238,1);
        box-shadow: 0 0.5px 6px 0 rgba(238,238,238,1);
        border-radius: 4px;
        margin-bottom: 0.4rem;
        box-sizing: content-box;
        &:last-child {
            margin-bottom: 0;
        }
        &:active {
            background-color: #efefef;
        }
        &.location, &.zoomin, &.zoomout {
            &:after {
                content: ' ';
                position: absolute;
                width: $icon-size;
                height: $icon-size;
                background-size: 100% 100%;
            }
        }
        &.location:after {
            background-image: url(../../assets/imgs/location.png);
        }
        &.zoomin:after {
            background-image: url(../../assets/imgs/zoomin.png);
        }
        &.zoomout:after {
            background-image: url(../../assets/imgs/zoomout.png);
        }
    }
}
</style>
